<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, user-scalable=no">
		<title>凑单品--慢慢买比价网</title>
		<!-- 引入第三方类库 -->
		<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css">
		<!-- 引入样式重置文件 -->
		<link rel="stylesheet/less" href="css/base.less">
		<!-- 引入index样式 -->
		<link rel="stylesheet/less" href="css/gsproduct.less">
		<!-- 引入第三方类库 -->
		<script src="lib/less/less.min.js"></script>
	</head>
	<body>
		<!-- 顶部功能条start -->
		<div class="header-bar">
			<div class="back">
				<a class="icon-back glyphicon glyphicon-menu-left" href="index.html"></a>
			</div>
			<div class="page-title">
				<h1>凑单品</h1>
			</div>
			<div class="app">
				<a class="icon-app" href="http://a.app.qq.com/o/simple.jsp?pkgname=com.manmanbuy.bijia"></a>
			</div>
		</div>
		<!-- 顶部功能条end -->
		<!-- 筛选功能start -->
		<div class="list">
			<div class="filter">
				<ul>
					<li class="">
						<a href="javascript:;">
							<em>京东</em>
							<span class="glyphicon glyphicon-triangle-bottom"></span>
						</a>
					</li>
					<li class="">
						<a href="javascript:;">
							<em>华北</em>
							<span class="glyphicon glyphicon-triangle-bottom"></span>
						</a>
					</li>
					<li class="">
						<a href="javascript:;">
							<em>全部价格</em>
							<span class="glyphicon glyphicon-triangle-bottom"></span>
						</a>
					</li>
				</ul>
			</div>
			<!-- 各种下拉列表 -->
			<div class="drop-shop dropdown" id="shop">
				<ul>
					<!--
					<li class="on">
						<a href="javascript:;">京东</a>
					</li>
					<li class="">
						<a href="javascript:;">一号店</a>
					</li>
					<li class="">
						<a href="javascript:;">天猫超市</a>
					</li>
					-->
				</ul>
			</div>
			<div class="drop-location dropdown" id="area">
				<ul>
					<!--
					<li class="on">
						<a href="javascript:;">华北（北京、山西等）</a>
					</li>
					<li class="">
						<a href="javascript:;">华东（山东、浙江等）</a>
					</li>
					<li class="">
						<a href="javascript:;">华南（广东、广西等）</a>
					</li>
					<li class="">
						<a href="javascript:;">华中（湖北、河南等）</a>
					</li>
					<li class="">
						<a href="javascript:;">西南（四川、云南等）</a>
					</li>
					<li class="">
						<a href="javascript:;">东北（辽宁、吉林等）</a>
					</li>
					<li class="">
						<a href="javascript:;">西北（宁夏、新疆等）</a>
					</li>
					-->
				</ul>
			</div>
			<div class="drop-price dropdown" id="price">
				<ul>
					<li class="on">
						<a href="javascript:;">全部价格</a>
					</li>
					<li class="">
						<a href="javascript:;">1-3元</a>
					</li>
					<li class="">
						<a href="javascript:;">3-5元</a>
					</li>
					<li class="">
						<a href="javascript:;">5-10元</a>
					</li>
					<li class="">
						<a href="javascript:;">10-15元</a>
					</li>
					<li class="">
						<a href="javascript:;">15元以上</a>
					</li>
				</ul>
			</div>
			<!-- /各种下拉列表 -->
			<div class="search">
				<a class="icon-search glyphicon glyphicon-search" href="javascript:;"></a>
			</div>
			<!-- 搜索弹框 -->
			<div class="pop-search">
				<!-- 搜索栏，引用Bootstrap组件 -->
				<div class="input-group">
					<input type="text" class="form-control" placeholder="搜索您想要的凑单品">
					<span class="input-group-btn">
						<button class="btn btn-default" type="button">搜索</button>
					</span>
				</div>
				<!-- 排序 -->
				<div class="sort clearfix">
					<h5>排序</h5>
					<ul>
						<li class="current-click">
							<a href="#">销量</a>
						</li>
						<li>
							<a href="#">价格↑</a>
						</li>
						<li>
							<a href="#">价格↓</a>
						</li>
					</ul>
				</div>
				<!-- 分类 -->
				<div class="category clearfix">
					<h5>分类</h5>
					<ul>
						<li class="current-click">
							<a href="#">全部</a>
						</li>
						<li>
							<a href="#">家居</a>
						</li>
						<li>
							<a href="#">数码</a>
						</li>
						<li>
							<a href="#">办公</a>
						</li>
						<li>
							<a href="#">个护</a>
						</li>
						<li>
							<a href="#">食品</a>
						</li>
						<li>
							<a href="#">母婴</a>
						</li>
						<li>
							<a href="#">服饰</a>
						</li>
					</ul>
				</div>
			</div>
			<!-- /搜索弹框 -->
		</div>
		<!-- 筛选功能end -->
		<!-- 商品主体部分start -->
		<div class="goods" id="product">
			<ul>
				<!--
				<li>
					<a href="#" >
						<img src="images/goods.jpg" alt="">
						<h5>【京东超市】宇仔 休闲零食重庆风味 素食牦牛肉(辣条)45g/袋</h5>
						<p class="clearfix">
							<span><i>&yen;</i>2</span>
							<button class="btn btn-default" type="submit">去凑单</button>
						</p>
					</a >
				</li>
				<li>
					<a href="#" >
						<img src="images/goods.jpg" alt="">
						<h5>【京东超市】宇仔 休闲零食重庆风味 素食牦牛肉(辣条)45g/袋</h5>
						<p class="clearfix">
							<span><i>&yen;</i>2</span>
							<button class="btn btn-default" type="submit">去凑单</button>
						</p>
					</a >
				</li>
				<li>
					<a href="#" >
						<img src="images/goods.jpg" alt="">
						<h5>【京东超市】宇仔 休闲零食重庆风味 素食牦牛肉(辣条)45g/袋</h5>
						<p class="clearfix">
							<span><i>&yen;</i>2</span>
							<button class="btn btn-default" type="submit">去凑单</button>
						</p>
					</a >
				</li>
				<li>
					<a href="#" >
						<img src="images/goods.jpg" alt="">
						<h5>【京东超市】宇仔 休闲零食重庆风味 素食牦牛肉(辣条)45g/袋</h5>
						<p class="clearfix">
							<span><i>&yen;</i>2</span>
							<button class="btn btn-default" type="submit">去凑单</button>
						</p>
					</a >
				</li>
				<li>
					<a href="#" >
						<img src="images/goods.jpg" alt="">
						<h5>【京东超市】宇仔 休闲零食重庆风味 素食牦牛肉(辣条)45g/袋</h5>
						<p class="clearfix">
							<span><i>&yen;</i>2</span>
							<button class="btn btn-default" type="submit">去凑单</button>
						</p>
					</a >
				</li>
				<li>
					<a href="#" >
						<img src="images/goods.jpg" alt="">
						<h5>【京东超市】宇仔 休闲零食重庆风味 素食牦牛肉(辣条)45g/袋</h5>
						<p class="clearfix">
							<span><i>&yen;</i>2</span>
							<button class="btn btn-default" type="submit">去凑单</button>
						</p>
					</a >
				</li>
				-->
			</ul>
		</div>
		<!-- 商品主体部分end -->
		<!-- loading部分start -->
		<div class="loading">
			<em>
				<img src="images/loading.gif" alt="">
			</em>
			<span></span>
		</div>
		<!-- loading部分end -->


		<!-- 各个模块模板部分start -->

		<!-- 凑单品店铺模板 -->
		<script type="text/template" id="shopTpl">
			{{each result as value i}}
			<!--
			{{if i == 0}}
				<li class="on">
					<a href="javascript:;">{{value.shopName}}</a>
				</li>
			{{else}}
				<li class="">
					<a href="javascript:;">{{value.shopName}}</a>
				</li>
			{{/if}} 
			-->
				<li data-shop="{{value.shopId}}" class={{i==0?"on":""}}>
					<a href="#">{{value.shopName}}</a>
				</li>
			{{/each}}
		</script>

		<!-- 凑单品区域模板 -->
		<script type="text/template" id="areaTpl">
			{{each result as value i}}
				<li data-area="{{value.areaId}}" class={{i==0?"on":""}}>
					<a href="javascript:;">{{value.areaName}}</a>
				</li>
			{{/each}}
		</script>

		<!-- 凑单品商品列表 -->
		<script type="text/template" id="productTpl">
			{{each result as value i}}
				<li>
					<a href="#" >
						<img src="{{value.productImg}}" alt="">
						<h5>{{value.productName}}</h5>
						<p class="clearfix">
							<span><i>&yen;</i>{{value.productPrice}}</span>
							<button class="btn btn-default" type="submit">去凑单</button>
						</p>
					</a >
				</li>
			{{/each}}
		</script>



		<!-- 各个模块模板部分end -->







		<!-- 引入jQuery.js -->
		<script src="lib/jquery/jquery.js"></script>
		<!-- 引入Boostrap.js -->
		<script src="lib/bootstrap/js/bootstrap.js"></script>
		<!-- 引入art-template.js -->
		<script src="lib/template/template.js"></script>
		<!-- 引入自己的index.js -->
		<script src="js/gsproduct.js"></script>
	</body>
</html>